var Stopwatch = Clock.extend({
    defaults: {
        millisesondsCounted: 0,
        startedDatetime: null,
        isRunning: false,
    },
    TIMER_INTERVAL: 10,
    construct: function() {
        this._superCall();
        this.reset();
    },
    reset: function() {
        this.data.datetime = new Date(0, 0, 0, 0, 0, 0, 0);
        this.data.millisesondsCounted = 0;
        this.data.isRunning = false;
        clearInterval(this.data.timer);
        this.fireEvent("reset");
    },
    update: function() {
        if (this.data.isRunning) {
            var difference = new Date(new Date() - this.data.startedDatetime + this.data.millisesondsCounted);
            this.data.datetime = new Date(0, 0, 0, difference.getUTCHours(), difference.getUTCMinutes(), difference.getUTCSeconds(), difference.getUTCMilliseconds());
            this.fireEvent("tick");
        }
    },
    stop: function() {
        this.data.millisesondsCounted += (new Date() - this.data.startedDatetime);
        this.data.isRunning = false;
        clearInterval(this.data.timer);
        this.fireEvent("stop");
    },
    start: function() {
        this.startTimer();
        this.data.isRunning = true;
        this.data.startedDatetime = new Date();
        this.fireEvent("start");
    },
    onViewEvent: function(view, eventName, info) {
        switch(eventName) {
            case "start-stop-clicked":
                if (this.data.isRunning) {
                    this.stop();
                }   else {
                    this.start();
                }
                break;
            case "reset-clicked":
                this.reset();
                break;
            default:
                return this._superCall();
                break;
        }
    },
    satelliteClasses: {
        View: {
            template: $("#template>.stopwatch"),
            defaultSettings: {
                showSeconds: true,
                showHundredths: true
            },
            render: function() {
                var self = this;
                this._superCall();
                this.showButton();
                if (!this.settings.showHundredths) {
                    $(".hundredths", this.el).remove();
                }
                $("button.start-stop", this.el).click(function(event) {
                    self.modelCallback("start-stop-clicked");
                });
                $("button.reset", this.el).click(function(event) {
                    self.modelCallback("reset-clicked");
                });
            },
            showTime: function() {
                this._superCall();
                if (this.settings.showHundredths) {
                    $(".hundredths", this.el).text(this.sanitizeNumber(Math.round(this.modelData.datetime.getMilliseconds() / 10)));
                }
            },
            showButton: function() {
                if (this.modelData.isRunning) {
                    $("button.start-stop", this.el).text("Stop");
                }   else {
                    $("button.start-stop", this.el).text("Start");
                }
            },
            onModelEvent: function(eventName, info) {
                switch(eventName) {
                    case "start":
                    case "stop":
                        this.showButton();
                        break;
                    case "reset":
                        this.showButton();
                        this.showTime();
                        break;
                    case "tick":
                        this.showTime();
                        break;
                    default:
                        return this._superCall();
                        break;
                }
            }
        }
    }
});